<template>
  <div class="order-management">
    <h1>订单管理</h1>
    <div class="order-actions">
      <el-button type="primary" @click="addOrder">添加订单</el-button>
      <el-button type="success" @click="exportOrders">导出订单</el-button>
    </div>

    <!-- 订单列表 -->
    <el-table :data="orders" style="width: 100%">
      <el-table-column prop="id" label="订单ID" width="180"></el-table-column>
      <el-table-column prop="customerName" label="客户姓名" width="180"></el-table-column>
      <el-table-column prop="status" label="订单状态" width="180"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="180"></el-table-column>
    </el-table>

    <!-- 分页功能 -->
    <el-pagination
        @current-change="fetchOrders"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>

export default {
  data() {
    return {
      orders: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  methods: {
    addOrder() {
      // 添加订单的逻辑
      console.log("添加订单");
    },
    exportOrders() {
      // 导出订单的逻辑
      console.log("导出订单");
    },
    fetchOrders(page = this.currentPage, size = this.pageSize) {
      try {
        console.log("开始获取订单...");
        const response =  fetchOrdersAPI(page, size); // 使用封装的请求方法
        console.log("原始响应:", response); // 打印完整的响应对象

        if (response && response.code === 200 && response.data) {
          console.log("获取订单成功:", response.data);
          this.orders = response.data.orders; // 获取订单数据
          console.log("订单数据:", this.orders);
          this.total = response.data.total; // 获取总数
          console.log("订单总数:", this.total);
          this.currentPage = page; // 更新当前页
        } else {
          console.error("获取订单失败:", response.message || '未知错误');
        }
      } catch (error) {
        console.error("获取订单失败:", error);
      }
    },
  },
  mounted() {
    this.fetchOrders(); // 初始加载数据
  },
};
</script>

<style scoped>
.order-management {
  padding: 20px;
}

.order-actions {
  margin-bottom: 20px;
}

.order-actions button {
  margin-right: 10px;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.order-table th, .order-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.pagination {
  margin-top: 20px;
}

.pagination button {
  margin-right: 10px;
}
</style>